import { LucideIcon, ArrowRight, Zap } from 'lucide-react';
import { clsx } from 'clsx';
import './styles.less';

export interface VideoToolCardProps {
  id: string;
  title: string;
  description: string;
  icon: LucideIcon;
  color: string;
  bgColor: string;
  available: boolean;
  popular?: boolean;
  features?: string[];
  onClick?: (toolId: string) => void;
  className?: string;
}

export const VideoToolCard: React.FC<VideoToolCardProps> = ({
  id,
  title,
  description,
  icon: Icon,
  color,
  bgColor,
  available,
  popular = false,
  features = [],
  onClick,
  className,
}) => {
  const handleClick = () => {
    if (available && onClick) {
      onClick(id);
    }
  };

  return (
    <div
      className={clsx(
        'video-tool-card',
        !available && 'video-tool-card--disabled',
        popular && 'video-tool-card--popular',
        className
      )}
      onClick={handleClick}
    >
      {popular && (
        <div className='video-tool-card__badge'>
          <Zap className='w-3 h-3' />
          热门
        </div>
      )}

      <div className='video-tool-card__header'>
        <div className={clsx('video-tool-card__icon', bgColor)}>
          <Icon className={clsx('w-6 h-6', color)} />
        </div>

        <div className='video-tool-card__title-section'>
          <h3 className='video-tool-card__title'>{title}</h3>
          {!available && <span className='video-tool-card__status'>即将推出</span>}
        </div>

        {available && (
          <div className='video-tool-card__arrow'>
            <ArrowRight className='w-5 h-5' />
          </div>
        )}
      </div>

      <p className='video-tool-card__description'>{description}</p>

      {features.length > 0 && (
        <div className='video-tool-card__features'>
          {features.map((feature, index) => (
            <span key={index} className='video-tool-card__feature'>
              {feature}
            </span>
          ))}
        </div>
      )}

      <div className='video-tool-card__footer'>
        {available ? (
          <div className='video-tool-card__action'>立即使用</div>
        ) : (
          <div className='video-tool-card__coming-soon'>敬请期待</div>
        )}
      </div>
    </div>
  );
};

export default VideoToolCard;
